<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>JSON入门</title>
	</head>

	<body>
		<h1>JSON对象的操作</h1>

		<h1>使用JSON创建对象</h1>
		<p>
			学校：<span id="school"></span><br/> 班级：
			<span id="class"></span><br /> 姓名：
			<span id="name"></span><br /> 性别：
			<span id="sex"></span>
		</p>
		<div id="content1"></div>
		<div id="content2"></div>
		<div id="content3"></div>
		<div id="content4"></div>
		<div id="siteContent"></div>
		<script type="text/javascript">
			//1.创建JSON对象
			var user = {
				"userName": "gky",
				"password": "123456",
				"role": "admin"
			}
			
			//2.访问对象的值
//			console.log(user.userName);
//			console.log(user["password"]);
//			
//			//3.修改对象的属性
//			user.password = "654321";
//			console.log(user["password"]);
			
			//4.循环对象
			for(var i in user) {
				document.getElementById("content1").innerHTML += i + "——>";
			}
			
			for(var i in user) {
				document.getElementById("content2").innerHTML += user[i] + "——>";
			}
			
			for(var i in user) {
				document.getElementById("content3").innerHTML += i+":"+user[i]+"——>";
			}
			

			//5.删除属性
			delete user.role;
			for(var i in user) {
				document.getElementById("content4").innerHTML += user[i] + "——>";
			}
			
			//6.JSON对象嵌套
			var user = {
				"userName": "gky",
				"password": "123456",
				"role": {
					"管理员":"admin",
					"数据维护":"dataAdmin",
					"数据备份":"bakAdmin",
					"普通会员":"test"
					}
			}
//			console.log(user.role.管理员);

			//6.练习
			var JSONStudent = {
				"schoolName": "广东科学技术职业学院",
				"className": "19软件",
				"studentName": "lusp",
				"studentSex": "女"
			}
			document.getElementById("school").innerHTML = JSONStudent.schoolName;
			document.getElementById("class").innerHTML = JSONStudent.className;
			document.getElementById("name").innerHTML = JSONStudent.studentName;
			document.getElementById("sex").innerHTML = JSONStudent.studentSex;

			//7.JSON对象中的数组
			var myobj={
				"name":"网站",
				"num":3,
  				"sites":["百度","腾讯","阿里巴巴"]
					}
			console.log(myobj.sites[0]);
			//for遍历
			var str="";
			for(i=0;i<myobj.sites.length;i++){
  				str=str+myobj.sites[i]+",";
		}
			//插入到div中
			document.getElementById("siteContent").innerHTML=str;
		
		
		</script>
	</body>

</html>